<template>
	<div id="visitor-map-charts">
		<div class="visitorMapCharts" ref="visitorMapCharts" style="height:100%;"></div>
		<div class="ranking-list">
			<el-table :data="rankingList" max-height="500" border>
				<el-table-column type="index" width="50">
				</el-table-column>
				<el-table-column prop="city" label="城市" width="180">
				</el-table-column>
				<el-table-column prop="count" label="访问量" width="180">
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script>
	import echarts from 'echarts'
	import 'echarts/map/js/china'
	//城市经纬度数据来自 https://github.com/Naccl/region2coord
	import geoCoordMap from '@/assets/json/city2coord.json'
	import {$get} from '@/puigins/request.js'
	export default {
		data() {
			return {
				rankingList: [],
				visitorMapCharts: null,
				//地图效果 reference https://www.jianshu.com/p/028525cbd080
				//reference https://echarts.apache.org/examples/zh/editor.html?c=map-polygon
				mapOption: {
					title: {
						text: '访客地图',
						x: 'center',
						y: 25
					},
					tooltip: {
						show: false
					},
					geo: {
						map: "china",
						roam: false, //关闭拖拽
						zoom: 1.24,
						center: [104.2, 36], //调整地图位置
						label: {
							normal: {
								show: false, //关闭省份名展示
								fontSize: "10",
								color: "rgba(0,0,0,0.7)"
							},
							emphasis: {
								show: false
							}
						},
						itemStyle: {
							normal: {
								areaColor: "#0d0059",
								borderColor: "#389dff",
								borderWidth: 1, //设置外层边框
								shadowBlur: 5,
								shadowOffsetY: 8,
								shadowOffsetX: 0,
								shadowColor: "#01012a"
							},
							emphasis: {
								areaColor: "#17008d",
								shadowOffsetX: 0,
								shadowOffsetY: 8,
								shadowBlur: 5,
								borderWidth: 1,
								shadowColor: "#181bff"
							}
						}
					},
					animationDuration: 5000,
					series: [{
							name: "",
							type: "scatter",
							coordinateSystem: "geo",
							data: [],
							symbol: "circle",
							symbolSize: 5,
							hoverSymbolSize: 10,
							tooltip: {
								formatter(value) {
									return value.data.name + "<br/>" + "访客数：" + value.data.uv
								},
								show: true
							},
							encode: {
								value: 2
							},
							label: {
								formatter: "{b}",
								position: "right",
								show: false
							},
							itemStyle: {
								color: "#0efacc"
							},
							emphasis: {
								label: {
									show: false
								}
							}
						},
						{
							name: "Top 5",
							type: "effectScatter",
							coordinateSystem: "geo",
							data: [],
							symbol: "circle",
							symbolSize: 12,
							tooltip: {
								formatter(value) {
									return value.data.name + "<br/>" + "访客数：" + value.data.uv
								},
								show: true
							},
							encode: {
								value: 2
							},
							showEffectOn: "render",
							rippleEffect: {
								brushType: "stroke",
								color: "#0efacc",
								period: 9,
								scale: 5
							},
							hoverAnimation: true,
							label: {
								formatter: "{b}",
								position: "right",
								show: true
							},
							itemStyle: {
								color: "#0efacc",
								shadowBlur: 2,
								shadowColor: "#333"
							},
							zlevel: 1
						}
					]
				},
				visitRecordOption: {
					xAxis: {
						data: [],
						boundaryGap: false,
						axisTick: {
							show: false
						}
					},
					grid: {
						left: 10,
						right: 20,
						top: 30,
						bottom: 0,
						containLabel: true
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross'
						},
						padding: [5, 10]
					},
					yAxis: {
						axisTick: {
							show: false
						}
					},
					legend: {
						data: ['访问量(PV)', '独立访客(UV)']
					},
					series: [{
							name: '访问量(PV)',
							smooth: true,
							type: 'line',
							itemStyle: {
								normal: {
									color: '#FF005A',
									lineStyle: {
										color: '#FF005A',
										width: 2
									}
								}
							},
							data: [],
							animationDuration: 2800,
							animationEasing: 'cubicInOut'
						},
						{
							name: '独立访客(UV)',
							smooth: true,
							type: 'line',
							itemStyle: {
								normal: {
									color: '#3888fa',
									lineStyle: {
										color: '#3888fa',
										width: 2
									},
									areaStyle: {
										color: '#f3f8ff'
									}
								}
							},
							data: [],
							animationDuration: 2800,
							animationEasing: 'quadraticOut'
						}
					]
				},
			}
		},
		mounted() {
			this.getData()
		},
		methods: {
			getData() {
				$get('/admin/manage/visitorLog/getVisitorCityInfo').then(res => {
					if (res.code == 200) {
						//渲染访客地图数据
						let mapData = this.convertData(res.data)
						this.rankingList = res.data.splice(0, 100)
						this.mapOption.series[0].data = mapData
						this.mapOption.series[1].data = mapData.splice(0, 5)
						this.initMapEcharts()
					} else {
						this.$message.error(res.data)
						console.log(res)
					}
				})

			},
			initMapEcharts() {
				this.visitorMapCharts = echarts.init(this.$refs.visitorMapCharts)
				this.visitorMapCharts.setOption(this.mapOption)
			},
			convertData(data) {
				let res = []
				for (let i = 0; i < data.length; i++) {
					let geoCoord = geoCoordMap[data[i].city]
					if (geoCoord) {
						res.push({
							name: data[i].city,
							value: geoCoord,
							uv: data[i].count
						})
					}
				}
				return res
			}
		},
		beforeDestroy() {
			if(this.visitorMapCharts!=null){
				this.visitorMapCharts.dispose()
				this.visitorMapCharts=null
			}
		}
	}
</script>

<style lang="scss">
	#visitor-map-charts {
		height: 500px;
		display: flex;
		width: 90%;
		margin: 0 auto;

		.visitorMapCharts {
			flex: 1;
		}

		.ranking-list {}
	}
</style>
